.active{
    color: white !important;
}
.panel {
    /* width: 300px; */
    /* height: 150px; */
    /* 设置边框背景图片的前提是盒子有边框的 */
    border: 20px solid red;
    border-width: 50px 38px 20px 126px;

    /* 内减盒子 */
    box-sizing: border-box;
    /* 父相 */
    position: relative;

    /* 边框背景图片 */
    /* 1. */
    border-image-source: url('../images/border.png');
    /* 2. */
    border-image-slice:50 38 20 126;
    /* 3. */
    border-image-width: 50px 38px 20px 126px;
    /* 4. */
    border-image-repeat: stretch;
}
.inner {
    /* 子绝 */
    position: absolute;
    top:-50px;
    right: -38px;
    bottom: -20px;
    left: -126px;
    padding: 20px 30px;
}
/* 项目整体有一个背景图 */
body{
    background: url(../images/bg.jpg);
    background-repeat:no-repeat;
    background-size: cover;
}
/* 版心 */
.container {
    /* 居中 */
    margin: 0 auto;

    /* 设置最小高度 */
    min-height: 700px;
    /* 设置最小宽度 */
    min-width: 1300px;
    /* 设置最大宽度 */
    max-width: 1920px;

    /* 设置背景图 */
    background: url(../images/logo.png) no-repeat top center;
    /* background-size: 100%; */
    background-size: contain;

    /* 伸缩布局 */
    display: flex;

    padding: 88px 20px 20px 20px;
}

/* 第一列 */
.column:nth-child(1){
    flex: 3;
}
/* 1.1 设备总数 */
.overview {
    height: 108px;
}
.numtop {
    width: 100%;
    height: 28px;
    display: flex;
    margin-bottom: 15px;
}
.numtop span{
    flex: 25%;
    font-size: 24px;
    text-align: center;
    color: #fff;
}
.txtbottom {
    width: 100%;
    display: flex;
}
.txtbottom span{
    flex: 25%;
    font-size: 12px;
    text-align: center;
    color: #4c9bfd;
}

/* 1.2 故障/异常 设备监控 */
.monitor {
    height: 475px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.tabs {
    height: 24px;
}
.tabs a {
    font-size: 18px;
    color: #1950c4;
}
.tabs a:nth-child(1){
    padding-right: 26px;
    border-right: 2px solid #00f2f1;
    margin-right: 26px;
}
/* tab栏切换 页面 头部 */
.content .head
{
    background-color: rgba(255, 255, 255, 0.1);
    margin-left: -30px;
    margin-right: -30px;
    padding-left: 30px;
    padding-right: 30px;
    color: #68d8fe;
    height: 38px;
    line-height: 38px;
    margin-top: 15px;
}
.content .head span{
    float: left;
    width: 25%;
}
.content .head span:nth-child(2){
    width: 50%;
}
/* tab栏切换 页面 轮播图部分 */
.content.active{
    display: block;
}
.content .carousel{
    overflow: hidden;
    height: 350px;
    margin-top: 5px;
    margin-left: -30px;
    margin-right: -30px;
    position: relative;
}
.content .carousel ul{
    position: absolute;
    top: 0px;
    left: 0px;
}
.content .carousel li {
    padding-left: 30px;
    padding-right: 30px;
    height: 35px;
    line-height: 35px;
    color: #5696e5;
}
.content .carousel li:hover{
    background-color: green;
    color: white;
}
.content .carousel li span{
    float: left;
    width: 25%;
}
.content .carousel li span:nth-child(2){
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 50%;
}
/* 1.3 点位分布统计 */
.point {
    height: 335px;
}
.point .inner>p,
.user .inner>p{
    color: white;
    font-size: 18px;
    margin-bottom: 15px;
}
.echarts .pie {
    float: left;
    width: 65%;
    height: 240px;
    background-color: rgba(255, 255, 255, 0.1);
}
.echarts .data{
    float: left;
    width: 35%;
    height: 240px;
    background-image: url(../images/rect.png);
    background-size: cover;
}
.echarts .data .item {
    height: 50%;
    text-align: center;
    padding-top: 35px;
}
.echarts .data .item p{
    font-size: 22px;
    color: white;
    font-weight: 700;
}
.echarts .data .item span {
    color:#4c9bfd;
}

/* 第二列 */
.column:nth-child(2){
    flex: 4;
    margin: 0 20px;
}
.map {
    height: 603px;
}
.map h3 {
    height: 50px;
    line-height: 50px;
    font-weight: normal;
    font-size: 22px;
    color: white;
}

.map h3 span {
    color: #68d8fe;
    margin-right: 3px;
}

.map .echarts {
    background: rgba(255, 255, 255, 0.1);
    height: 553px;
}
.map .echarts .geo {
    height: 100%;
}
.user {
    height: 335px;
    margin-top: 20px;
}
.user .echarts .bar {
    float: left;
    height: 240px;
    background-color: rgba(255, 255, 255, 0.1);
    width: 70%;
}
.user .echarts .data{
    width: 30%;
}
/* 第三列 */
.column:nth-child(3){
    flex: 3;
}
.order{
    height: 144px;
}
.order .head{
    height: 26px;
    line-height: 26px;
}    
.order .head a{
    color: #1950c4;
    font-size: 14px;
    float: left;
}
.order .head span{
    float: left;
    width: 2px;
    height: 18px;
    margin-top: 4px;
    background-color: #00f2f1;
    margin-left: 16px;
    margin-right: 16px;
}
.order .data .item{
    float: left;
    width: 50%;
    height: 100%;
}
.order .data .item b {
    font-size: 24px;
    margin: 10px 0;
    color: white;
    display: block;
}
.order .data .item span{
    color: #4c9bfd;
}

/* 3.2 */
.sales{
    margin: 20px 0;
    height: 244px;
}.sales .head{
    height: 24px;
    margin-bottom: 10px;
}
.sales .head h3{
    float: left;
    font-size: 18px;
    border-right: 2px solid #00f2f1;
    color: white;
    padding-right: 15px;
    font-weight: 400;
   margin-right: 4px;
}
.sales .head span {
    float: left;
    padding: 4px 5px;
    margin-left:10px;
    color: #0bace6;
    font-size: 14px;
    border-radius: 3px;

}
.sales .head span.active{
    background-color: #4c9bfd;
}
.sales .echarts .line {
    height: 170px;
    background-color: rgba(255, 255, 255, 0.1);
}
/* 3.3 */
.hannel{
    height: 230px;
    width: 48%;
}
.hannel h3{
    font-size: 16px;
    color: white;
    margin-bottom: 10px;
    font-weight: normal;
    overflow: hidden;
}
.hannel .content {
    display: flex;
    flex-wrap: wrap;
    height: 160px;
}
.hannel .content .item{
    flex: 50%;
    height: 50%;
    text-align: center;
}
.hannel b{
    font-size: 24px;
    color: white;
    height: 24px;
    width: 100%;
}
.hannel  small{
    color: white;
    padding-left: 2px;
}
.hannel .content .item span {
    display: block;
    color: #4c9bfd;
    margin-top: 5px;
}
.hannel .echarts{
    height: 90px;
    margin-top: 10px;
    position: relative;
}
.hannel .echarts .loop{
    background-color: rgba(255, 255, 255, 0.1);
    height: 100%;
}
.hannel .echarts .num{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}   
.hannel .echarts .num b{
    font-size: 16px;
}

.hannel .data .quota{
    float: left;
    width: 50%;
    height: 65px;
    margin-top: 15px;
    color:white;
    font-size: 14px;
}
.hannel .data .quota p{
    margin-bottom: 5px;
}
.hannel .data .quota span{
    font-size: 12px;
    color: #4c9bfd;
    margin-top: 5px;
}

/* 3.4 */
.hot{
    height: 280px;
    margin-top: 20px;
}
.hot .all {
    height: 100%;
    width: 30%;
}
.hot .all p{
    color: white;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}
.hot .all .data{
    width: 100%;
    height: 200px;
    padding-top: 15px;
}
.hot .all .data ul  {
    width: 100%;
    height: 100%;
}
.hot .all .data ul li {
    height: 30%;
    color: #4c9bfd;

}
.hot .all .data .icon1 li i {
    font-size: 35px;
    padding-right: 15px;
    vertical-align: middle;
}

.province {
    width: 70%;
    height: 100%;
    padding-left: 10px;
}
.province h3 b{
    font-size: 16px;
    color: white;
}
.province h3 i{
    color: #087faf;
}

.hot .province .data {
    height: 200px;
}
.hot .province .data ul {
    width: 50%;
}
.hot .province .data ul li {
    height: 34px;
    line-height: 34px;
}
.hot .province .data ul:nth-child(1) li {
    color:#4995f4;
}
.hot .province .data ul:nth-child(1) li.active {
    background-color: rgba(255, 255, 255, 0.1);
    color:#a3c6d2;
}
.hot .province .data ul:nth-child(2) li {
    padding-left: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    color:#3ab6c3;
}
.hot .province .data ul li span {
    float: left;
    width: 50%;
}
.hot .province .data ul li b {
    float: left;
    width: 35%;
}
.hot .province .data ul li i {
    float: left;
    width: 15%;
    margin-top: 11px;
}

.hot  .province .data{
    margin-top: 20px;
}


.hot .province .icon-up  {
    color:#dc3c33;
}
.hot .province .icon-down {
    color:#36be90;
}